<template>
	<div>
		<div v-show="Login = false">
			<h1>123123</h1>
		</div>
		<div style="cursor:default;" onselectstart="return false" id="abab" v-show="Login = true">
			<div style="height: 40px; width: 100%; background-color: #eeeeee;">
				<Row type="flex" justify="start" class="code-row-bg" style="float: left; padding-left: 5px;padding-right: 5px;">
					<div style="height: 40px; line-height: 40px; margin-left: 10px;">
						<a style="color: #3f3f3f;" @click='houtui'>
							<Icon type="ios-arrow-back" size="20" />
						</a> <!-- 返回上一层按钮 -->
						<a style="margin-left: 5px;">
							<Icon type="ios-arrow-forward" color="#3f3f3f" size="20" />
						</a>
						<a style="margin-left: 5px;">
							<Icon type="md-refresh" color="#3f3f3f" size="20" @click='shuaxin' />
						</a>
					</div>
		
					<a style="height: 40px; line-height: 40px; margin-left: 20px; color: #3f3f3f;">
						<a>123141</a>
					</a>
				</Row>
				<div style="height: 40px; width: 35%; float: right;">
					<Button size="small" @click="upload">上传</Button>
					<input type="file" style="display:none" id="uploadfile" @change="uploadfiles(files)">
					<Button size="small" @click="add">新建文件夹</Button>
					<i-switch size="small" v-model="switch1" @on-change="change" style="margin-top: 12px;float: right;margin-right: 10px;" />
					<Input suffix="ios-search" size="small" placeholder="搜索" style="margin-top: 7px; width: auto; float: right; margin-right: 10px;" />
				</div>
			</div>
		
		
		
			<ul v-if="switch1" v-for="(item,index) in data1" style="list-style: none;text-align: center;">
				<vue-context-menu :contextMenuData="contextMenuData" @savedata="savedata(index)" @newdata="newdata(index)"></vue-context-menu>
				<li class="ul-li" @dblclick="handledbClick(index)" @contextmenu="showMenu(index)">
					<svg class="icon" aria-hidden="true" v-if="item.type == 'd'">
						<!-- (this.arr).substring((this.arr).lastIndexOf('.')+1) -->
						<use xlink:href="#icon-wenjianjia1"></use>
					</svg>
					<svg class="icon" aria-hidden="true" v-else>
						<!-- (this.arr).substring((this.arr).lastIndexOf('.')+1) -->
						<use xlink:href="#icon-yasuobao"></use>
					</svg>
					<div>
						<p style="float: left; width: 100%;text-align: center;">{{item.name}}</p>
						<!-- <Progress :percent="+ (item.use).toFixed(2)" :stroke-width="20" text-inside /> -->
					</div>
				</li>
			</ul>
		</div>
	</div>

</template>
<script>
	const ftp = require('ftp')
	const client = new ftp()
	const iconv = require('iconv-lite')
	export default {
		data() {
			return {
				Login:false,
				contextMenuData: {
					// the contextmenu name(@1.4.1 updated)
					menuName: "demo",
					// The coordinates of the display(菜单显示的位置)
					axis: {
						x: null,
						y: null
					},
					// Menu options (菜单选项)
					menulists: [{
							fnHandler: "savedata", // Binding events(绑定事件)
							btnName: "下载", // The name of the menu option (菜单名称)
						},
						{
							fnHandler: "newdata",
							btnName: "重命名"
						},
						{
							fnHandler: "newdata",
							btnName: "删除"
						},
						{
							fnHandler: "newdata",
							btnName: "删除文件夹"
						},
						{
							fnHandler: "newdata",
							btnName: "打开当前路径"
						},

					]
				},
				columns1: [{
					title: 'Name',
					key: 'name'
				}],
				data1: [{
					name: 'John Brown',
				}],
				switch1: 'false'
			}
		},
		mounted() {
			this.handleSubmit()
		},
		methods: {
			//获取根目录列表
			handleSubmit(name) {
				window.sessionStorage.setItem('FTP_path', "/")
				console.log(client.put)
				client.on('ready', () => {

				})
				client.connect({
					host: window.localStorage.getItem('ftp_host'),
					port: window.localStorage.getItem('ftp_port'),
					user: window.localStorage.getItem('ftp_user'),
					password: window.localStorage.getItem('ftp_password'),
				})

				const FTP_path = window.sessionStorage.getItem('FTP_path')
				client.list(FTP_path, (err, files) => {
					for (var i = 0; i < files.length; i++) {
						files[i].name = iconv.decode(files[i].name, 'gbk')
					}


					console.log(files)
					const _this = this
					_this.data1 = files
				})
				
				axios
				  .get("https://cloud.seafile.com/api2/repos/", {
				    headers: {
				      // 请求头
				      Accept: "application/json; indent=4",
				      Authorization: "Token " + Token
				    }
				  })
				  .then(function(respanse) {
				    console.log(respanse);
				    _this.list = respanse.data;
				    if (_this.list.length != 0) {
				      for (var i = 0; i < _this.list.length; i++) {
				        //定义空字符串size
				        var size = "";
				        //获取数组内的size并赋值变量
				        var fileSize = _this.list[i].size;
				        //判断文件大小
				        if (fileSize < 1024) {
				          size = fileSize + "B";
				        } else if (fileSize < 1048576) {
				          size = (fileSize / 1024).toFixed(1) + "K";
				        } else if (fileSize < 1073741824) {
				          size = (fileSize / 1048576).toFixed(1) + "M";
				        } else {
				          size = (fileSize / 1073741824).toFixed(1) + "G";
				        }
				        // 将数据重新放入到obj数组里面
				        var obj = _this.list[i]; //或者 var obj=new Object();
				        var key = "size";
				        obj[key] = size;
				        console.info(obj);
				      }
				    }
				  });
				
			},
			//上传
			upload() {
				document.getElementById('uploadfile').click()
				// client.put('d://222.txt', '/public/222-copy.txt', function(err, data) {
				// 	if (err) throw err;
				// 	client.end();
				// });
			},
			// input上传
			uploadfiles(files){
				console.log(files)
				c.put(path, '/public/'+name, function(err, data) {
					if (err) throw err;
					client.end();
				});
			},
			//新建文件夹
			add() {
				client.mkdir("/public/新建文件夹", function(err) {
					if (err) throw err;
					client.end(); //关闭
				});
			},
			// 重命名
			savedata() {
				client.rename('111.txt', '333.txt', function(err) {
					if (err) throw err;
					client.end(); //关闭
				});
			},
			//  删除
			newdata(row) {
				console.log(row)
				// c.connect(connectionProperties); //连接ftp
				c.delete('222.txt', function(err) {
					if (err) throw err;
					c.end(); //关闭
				});
			},
			//双击事件
			handledbClick(row) {
				var FTP_path = window.sessionStorage.getItem('FTP_path')
				window.sessionStorage.setItem('FTP_path', FTP_path + '/' + this.data1[row].name)
				client.list('/' + FTP_path, (err, files) => {
					for (var i = 0; i < files.length; i++) {
						files[i].name = iconv.decode(files[i].name, 'gbk')
					}
					console.log(files)
					const _this = this
					_this.data1 = files
				})

				// name = this.data1[row]
				// const str = iconv.decode('ÎÒ', 'GBK');
				// console.log(str)
			},
			//后退事件
			houtui() {
				const asd = window.sessionStorage.getItem('FTP_path')
				const FTP_path = asd.substring(0, asd.lastIndexOf('/'))
				window.sessionStorage.setItem('FTP_path', FTP_path)
			},
			//刷新页面事件
			shuaxin() {
				this.$Spin.show();
				setTimeout(() => {
					this.$Spin.hide();
				}, 1000);
			},
			//缩略图切换
			change(status) {
				this.$Message.info('开关状态：' + status);
			},
			showMenu(row) {
				event.preventDefault();
				var x = event.clientX;
				var y = event.clientY;
				// Get the current location
				this.contextMenuData.axis = {
					x,
					y
				};
				console.log(row)
				
			},
			
		}
	}
</script>
<style>
	.ul-li {
		float: left;
		text-align: center;
		list-style: none;
		width: 100px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		transition: .5s;
		margin: 5px;
	}
	
	.ul-li:hover{
	background-color: #e5f3ff;
	transform: translateY(-5px);
	} 
	
	#abab  ul  ul li  {
		height: 25px;
	}
</style>